<template>
  <div>
    <!-- 查询、下载PDF、返回 -->
    <el-row class="header">
      <el-select
        v-model="casingSize"
        placeholder="请选择套管尺寸"
        filterable
        size="small"
      >
        <el-option
          v-for="(item, id) in casingSizeOptions"
          :key="id"
          :value="item"
        />
      </el-select>
      <!-- <el-button
        class="top-btn"
        size="small"
        type="primary"
        @click="downloadPDF()"
        >下载PDF</el-button
      > -->
      <el-button class="top-btn" type="danger" size="small" @click="goback()"
        >返回</el-button
      >
    </el-row>
    <!-- 报告 -->
    <el-row class="well-report-detail">
      <el-card>

        <!-- 表格 -->
        <WellReport :wellName="wellName" :casingSize="casingSize" />

        <!-- footer 签字 -->
        <el-row style="margin: 50px 0">
          <el-row style="margin: 30px 0">
            <el-col :span="12" align="middle">
              <label>报告人：</label>
              <span>______________________</span>
            </el-col>
            <el-col :span="12" align="middle">
              <label>批准人：</label>
              <span>______________________</span>
            </el-col>
          </el-row>
          <el-row style="margin: 30px 0">
            <el-col :span="12" align="middle">
              <label>日&#12288;期：</label>
              <span>______________________</span>
            </el-col>
            <el-col :span="12" align="middle">
              <label>日&#12288;期：</label>
              <span>______________________</span>
            </el-col>
          </el-row>
        </el-row>
        
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getWellCasingSize } from '../../../api/module/dataquery.js'
// 没有标明引入哪个文件，会自动找到 reportComponents 下面的 index.vue 文件
import WellReport from './reportComponents'


export default {
  components: {
    WellReport,
  },
  data() {
    return {
      form: {}, // 前一页的查询条件
      pager: null, // 前一页的页码数
      wellName: '',
      casingSize: '',
      casingSizeOptions: [],
    }
  },
  created() {
    this.form = this.$route.params.filterForm
    this.pager = this.$route.params.pager
    this.wellName = this.$route.params.id
    this.handleGetWellCasingSize(this.wellName)
  },
  methods: {
    /**
     * 作用：传入井名，查询井的所有套管尺寸
     * { String } wellName
     */
    handleGetWellCasingSize(wellName) {
      getWellCasingSize({ wellName: this.wellName })
        .then((res) => {
          this.casingSizeOptions = res.data.data
          if (this.casingSizeOptions.length > 0) {
            this.casingSize = this.casingSizeOptions[0]
          } else {
            this.$message.warning('该井无套管尺寸数据！')
          }
        })
        .catch(() => {
          this.$message.error('该井套管尺寸查询失败，请返回重新查询！')
        })
    },

    /**
     * 作用：下载 PDF 文件
     */
    downloadPDF() {},

    /**
     * 作用：返回前一页，并把前一页查询条件返回。
     */
    goback() {
      this.$router.push({
        name: 'wellQuery',
        params: { filterForm: this.form, pager: this.pager },
      })
    },
  },
}
</script>

<style scoped>
.header {
  background-color: #eef0f6;
  padding: 5px 10px;
  margin-bottom: 10px;
}
.section {
  margin-bottom: 30px;
  border-bottom: 1px solid black;
}
</style>
